<template>
	<view class="container">
		<span class="title">择偶要求编辑</span>
		<view class="list">
			<view class="select">
				<span><img class='icon' src="@/assets/img/sex.png" alt="">性别</span>
				<picker mode="selector" :value="personInfo.sexKey" :range="local.sex"
					@change="(val)=>selectPickerChagne(val,'sex','sex')">
					<view class="uni-input">{{personInfo.sex||'请选择'}}</view>
				</picker>
			</view>

			<view class="select">
				<span><img class='icon' src="@/assets/img/emotion.png" alt="">情感状况</span>
				<picker mode="selector" :value="personInfo.emotion" range-key="name" :range="local.emotion"
					@change="selectEmotion">
					<view class="uni-input">{{(personInfo.emotion&&local.emotion[personInfo.emotion].name)||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/age.png" alt="">最大年龄</span>
				<picker mode="selector" :value="personInfo.maxAgeKey" :range="local.age"
					@change="(val)=>selectPickerChagne(val,'maxAge','age',1)">
					<view class="uni-input">{{personInfo.maxAge||'请选择'}}岁</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/age.png" alt="">最小年龄</span>
				<picker mode="selector" :value="personInfo.minAgeKey" :range="local.age"
					@change="(val)=>selectPickerChagne(val,'minAge','age',1)">
					<view class="uni-input">{{personInfo.minAge||'请选择'}}岁</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/education.png" alt="">最低学历</span>
				<picker mode="selector" :value="personInfo.education" range-key="name" :range="local.education"
					@change="(val)=>selectChange(val,'education')">
					<view class="uni-input">{{(personInfo.education&&local.education[personInfo.education].name)||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/height.png" alt="">最高身高</span>
				<picker mode="selector" :value="personInfo.maxHeightKey" :range="local.height"
					@change="(val)=>selectPickerChagne(val,'maxHeight','height',1)">
					<view class="uni-input">{{personInfo.maxHeight||'请选择'}}CM</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/height.png" alt="">最低身高</span>
				<picker mode="selector" :value="personInfo.minHeightKey" :range="local.height"
					@change="(val)=>selectPickerChagne(val,'minHeight','height',1)">
					<view class="uni-input">{{personInfo.minHeight||'请选择'}}CM</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/weight.png" alt="">最高体重</span>
				<picker mode="selector" :value="personInfo.maxWeightKey" :range="local.weight"
					@change="(val)=>selectPickerChagne(val,'maxWeight','weight',1)">
					<view class="uni-input">{{personInfo.maxWeight||'请选择'}}KG</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/weight.png" alt="">最低体重</span>
				<picker mode="selector" :value="personInfo.minWeightKey"  :range="local.weight"
					@change="(val)=>selectPickerChagne(val,'minWeight','weight',1)">
					<view class="uni-input">{{personInfo.minWeight||'请选择'}}KG</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/salary.png" alt="">最低年薪</span>
				<picker mode="selector" :value="personInfo.annualIncomeKey" :range="local.annualIncome"
					@change="(val)=>selectPickerChagne(val,'annualIncome','annualIncome')">
					<view class="uni-input">{{personInfo.annualIncome||'请选择'}}万元</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/car.png" alt="">车辆情况</span>
				<picker mode="selector" :value="personInfo.car" :range="local.car"
					@change="(val)=>selectChange(val,'car')">
					<view class="uni-input">{{local.car[personInfo.car]||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/house.png" alt="">住房情况</span>
				<picker mode="selector" :value="personInfo.house" :range="local.house"
					@change="(val)=>selectChange(val,'house')">
					<view class="uni-input">{{local.house[personInfo.house]||'请选择'}}</view>
				</picker>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/job.png" alt="">职业要求</span>
				<input class="uni-input" maxlength="10" v-model="personInfo.occupation" placeholder="请输入职业" />
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/address.png" alt="">地区要求</span>
				<pick-regions @getRegion="handleGetAddress">
					<span>{{personInfo.province+'-'+personInfo.city+'-'+personInfo.county}}</span>
				</pick-regions>
			</view>
			<view class="select">
				<span><img class='icon' src="@/assets/img/emotion.png" alt="">脱单要求</span>
				<picker mode="selector" :value="personInfo.requirement" :range="local.honestIndex"
					@change="selectRequirement">
					<view class="uni-input">{{personInfo.requirement||'请选择'}}</view>
				</picker>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<!-- 	<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="error" cancelText="否" confirmText="是" title="信息确认"
					content="您已确定了解平台使用规则，提交资料后将会默认授权您的基本信息和公开相册在本平台对外展示，可供其他用户查看。您的联系方式和私密相册仅在您授权后可对心动对象展示。"
					@confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup> -->
		</view>
		<button type="primary" @click="submit" class="submit">提交</button>
	</view>
</template>

<script>
	import {
		localData,
		localCar,
		localHouse
	} from '@/pages/tabBar/Discover/data.js';
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	import pickRegion from '@/components/pick-regions/pick-regions.vue'
	const local = {
		sex: ['男', '女'],
		constellation: ['水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'],
		education: localData[2].submenu,
		car: localCar,
		house: localHouse,
		emotion: localData[3].submenu,
		age: ['不限', ...Array.from(Array(66).keys()).splice(18)],
		height: ['不限', ...Array.from(Array(201).keys()).splice(150)],
		weight: ['不限', ...Array.from(Array(121).keys()).splice(35)],
		annualIncome: Array.from(Array(100).keys()),
		honestIndex: ['无要求', '需实名', '真诚指数30分及以上', '真诚指数40分及以上', '真诚指数50分及以上', '真诚指数60分及以上', '真诚指数70分及以上',
			'真诚指数80分及以上', '真诚指数90分及以上'
		]
	}
	export default {
		components: {
			pickRegion
		},
		mounted() {
			request(url.getFrientInfo, 'GET', {}).then(res => {

				this.personInfo = {
					...res.data,
					maxHeight: res.data.maxHeight || '不限',
					minHeight: res.data.minHeight || '不限',
					maxWeight: res.data.maxWeight || '不限',
					minWeight: res.data.minWeight || '不限',
					maxAge: res.data.maxAge || '不限',
					minAge: res.data.minAge || '不限'
				}
			})
		},
		data() {
			return {
				personInfo: {
					annualIncome: '',
					car: 1,
					city: "",
					county: "",
					education: 0,
					emotion: 1,
					house: 1,
					maxAge: '',
					maxHeight: '',
					maxWeight: '',
					minAge: '',
					minHeight: '',
					minWeight: '',
					province: "",
					address: '',
					sex: '',
					sexKey: 0,
					maxHeightKey: 0,
					minHeightKey: 0,
					maxWeightKey: 0,
					minWeightKey: 0,
					maxAgeKey: 0,
					minAgeKey: 0,
					annualIncomeKey: 0,
					requirement: ''
				},
				local: Object.freeze(local),
			};
		},
		methods: {
			selectRequirement(val) {
				this.personInfo.requirement = local.honestIndex[val.detail.value];
			},
			submit() {
				request(url.updateFriendInfo, 'post', {
					...this.personInfo,
					maxAge: this.personInfo.maxAge === '不限' ? null : this.personInfo.maxAge,
					minAge: this.personInfo.minAge === '不限' ? null : this.personInfo.minAge,
					minHeight: this.personInfo.minHeight === '不限' ? null : this.personInfo.minHeight,
					maxHeight: this.personInfo.maxHeight === '不限' ? null : this.personInfo.maxHeight,
					minWeight: this.personInfo.minWeight === '不限' ? null : this.personInfo.minWeight,
					maxWeight: this.personInfo.maxWeight === '不限' ? null : this.personInfo.maxWeight,
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					} else {
						uni.showToast({
							title: '提交失败，请稍后重试',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				})
			},
			selectEmotion(val) {
				this.personInfo.emotion = val.detail.value;
			},
			// dialogConfirm() {
			// 	request(url.updateFriendInfo, 'post', this.personInfo).then(res => {
			// 		if (res.status == 200) {
			// 			uni.showToast({
			// 				title: '提交成功',
			// 				icon: 'none'
			// 			});
			// 		} else {
			// 			uni.showToast({
			// 				title: '提交失败，请稍后重试',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	})
			// },
			handleGetAddress(val) {
				console.log(val)
				this.personInfo.province = val[0]?.name;
				this.personInfo.city = val[1]?.name;
				this.personInfo.county = val[2]?.name;
				this.personInfo.address = val.map(item => item?.name).join('-');
			},
			selectChange(val, key) {
				this.personInfo[key] = val.detail.value
			},
			selectPickerChagne(val, key, localKey, type) {
				this.personInfo[key] = this.local[localKey][val.detail.value]
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #fff;
		margin-top: 10px;
		padding: 15px 0;

		.submit {
			margin-top: 30px;
			width: 90%;
			background: #00B7EE;
			font-size: 17px;
			font-family: SimHei;
			color: #FFFFFF;
		}

		.title {
			padding-left: 15px;
			font-size: 13px;
			font-family: SimHei;
			color: #888888;
		}

		.list {
			margin-top: 10px;
		}
	}

	.desc {
		padding: 15px;
		border-top: 1px solid #eeeeee;

		/deep/ .uni-input {
			box-sizing: content-box;
			color: #4D4D4D;
			font-size: 16px;
			text-align: right;
		}

		.textarea {
			border: 1px solid #eeeeee;
			padding: 10px;
			color: #888;
			font-size: 11px;
			margin-top: 10px;
			width: auto;
		}

		color :#4C4C4C;
		font-size: 16px;
	}

	.select {
		height: 50px;
		padding: 0 15px;

		/deep/ .uni-input {
			box-sizing: content-box;
			color: #4D4D4D;
			font-size: 16px;
			text-align: right;
		}

		color :#4C4C4C;
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top:1px solid #eeeeee;

		span {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.icon {
			margin-right: 12px;
			width: 19px;
			height: 19px;
		}
	}
</style>
